<template>
  <div>
    <img src="../../src/assets/img/back.jpg" class="background">
    <div class="signUp">
      <div class="signUp-head">
        <span>用户登录</span>
      </div>
      <el-form :validate-on-rule-change="false" :model="loginForm" ref="loginForm" label-width="70px" class="demo-ruleForm" :rules="rules">
        <el-form-item prop="userName" label="用户名" >
          <el-input  v-model="loginForm.userName" placeholder="用户名" prefix-icon="el-icon-user-solid">
          </el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input  prefix-icon="el-icon-lollipop" type="password" v-model="loginForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button  @click="SignRegister">注册</el-button>
          <el-button type="primary" @click="SignLogin">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {rules} from '../assets/data/form'
import { v4 as uuidv4 } from 'uuid'
export default {
  name: "Login",
  data() {
    return {
      loginForm:{
        userName: '',       //用户名
        password: '',       //密码
      },
      rules: {}
    }
  },
  mounted() {
    this.rules=rules
  },
  methods: {
    //用户登录
   async SignLogin(){
     let result=await this.$API.reqConsumerLogin(this.loginForm.userName,this.loginForm.password)
     if (result.code==10000){
       let token=uuidv4()
       localStorage.setItem('Token',token)
       this.$store.commit('LOGININFO',false)
       this.$store.commit('AVATOR',result.data.avator)
       this.$store.commit('USERID',result.data.id)
       this.$store.commit('USERNAME',result.data.username)
       this.$notify.success('登录成功')
       await this.$router.push({path:'/home',query:{name:'首页'}})
     }else{
       this.$notify.error('用户名或密码错误')
       await Promise.reject(new Error('fail'))
     }
    },
    SignRegister(){
      this.$router.push({path:'/register',query:{name:'注册'}})
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/sign-up";
.background{
  width:100%;
  height: 100%;
  position: relative;
}
.signUp{
  margin-top: 70px;
}

</style>
